<!--添加或修改任务弹框-->
<template>
  <el-dialog
      v-loading="loading"
      :before-close="handleClose"
      :element-loading-text="`${title}任务中...`"
      :title="title + '任务'"
      :visible.sync="dialogVisible"
      width="40%">
    <el-form ref="form" :model="form" :rules="rules" label-position="top">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="任务名称" prop="name">
            <el-input v-model="form.name" clearable placeholder="请输入任务名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开始时间" prop="startTime">
            <el-date-picker
                v-model="form.startTime"
                clearable
                placeholder="请选择时间"
                style="width: 100%;"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="截至时间" prop="dateUpTo">
            <el-date-picker
                v-model="form.dateUpTo"
                clearable
                placeholder="请选择时间"
                style="width: 100%;"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="优先级">
            <div style="display: flex;">
              <div v-for="(item,i) in levelList"
                   :class="`level level${i} ${form.flag === item.value ? 'active' + i : ''}`"
                   class="el-icon-s-flag"
                   @click="form.flag = item.value">
                {{ item.name }}
              </div>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注">
            <el-input v-model="form.remarks" :rows="4" placeholder="请输入备注" type="textarea"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submit">确 定</el-button>
  </span>
  </el-dialog>
</template>

<script>
export default {
  name: "AddTask",
  props: {
    title: {
      type: String,
      default: '添加'
    }
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      form: {
        name: null,
        startTime: null,
        dateUpTo: null,
        flag: 1,
        remarks: null
      },
      rules: {
        name: [{required: true, message: '请输入任务名称', trigger: 'blur'},],
        startTime: [{required: true, message: '请选择开始时间', trigger: 'blur'},],
        dateUpTo: [{required: true, message: '请输入结束时间', trigger: 'blur'},],
      },
      levelList: [
        {
          name: '高优先级',
          value: 1
        }, {
          name: '中优先级',
          value: 2
        }, {
          name: '低优先级',
          value: 3
        },
      ]
    }
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done()
          })
          .catch(_ => {
          })
    },
    submit() {
      this.loading = true
      this.$refs['form'].validate(valid => {
        if (valid) {
          const newList = this.$store.getters['about/aboutList']
          const userName = this.$store.getters['user/userName']
          this.form.createUser = userName

          this.$store.dispatch('about/setAboutList', newList).then(r => {
            newList.unshift(this.form)
            this.loading = false
            this.dialogVisible = false
            this.$message.success(this.title + '任务成功')

            // 用来触发使用组件的页面的列表的更新
            this.$emit('updateList')
          })
        } else {
          console.error('需要输入必填项')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  border-radius: 20px;
}

::v-deep .el-form-item__label {
  padding: 0;
  line-height: 30px;
}

.level {
  height: 4vh;
  line-height: 2vh;
  border-radius: 6px;
  padding: 1vh 2vh;
  border: #EF4444 1px solid;
  color: #EF4444;
  cursor: pointer;
}

.active0 {
  background-color: #EF4444;
  color: white;
  border-color: #EF4444;
}

.level1 {
  margin-left: 2vh;
  border: #EAB308 1px solid;
  color: #EAB308;
}

.active1 {
  background-color: #EAB308;
  color: white;
  border-color: #EAB308;
}

.level2 {
  margin-left: 2vh;
  border: #3B82F6 solid 1px;
  color: #3B82F6;
}

.active2 {
  background-color: #3B82F6;
  color: white;
  border-color: #3B82F6;
}

</style>
